<template>
  <div>
    <Header></Header>
    <div class="main">
      <div class="banner">
        <img style="width: 100%" src="https://img.js.design/assets/img/617766b867e5da8dd2a409b5.png" alt="">
      </div>
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="'ArrowRightBold'">
          <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
          <!--          <el-breadcrumb-item class="link" @click="toQuestionBack">我的题库</el-breadcrumb-item>-->
          <!--          <el-breadcrumb-item class="link" @click="toBack">{{subject_name}}</el-breadcrumb-item>-->
          <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row justify="space-between">
        <el-col :span="4">
          <!--          {{user_info}}-->
          <div v-if="user_info" style="display: flex;justify-content:center;padding: 20px 0px;background-color:  rgba(235, 244, 255, 1);">
            <div style="display: flex;flex-direction: column;align-items: center">
              <el-avatar :size="100" :src="user_info.avatarPic" />
              <div style="text-align: center;padding: 10px">
                <p style="padding-bottom: 10px">{{user_info.nickname}}</p>
                <p style="font-size: 12px" v-if="user_info.userSchools">有效期：{{proxy.$filters.dateTimeFormat2(user_info.userSchools[0].expireTime)}}</p>
              </div>
            </div>
          </div>
          <el-menu
                  active-text-color="white"
                  background-color="rgba(235, 244, 255, 1)"
                  class="question"
                  :default-active="currentItem"
                  text-color="rgba(102, 102, 102, 1)"
                  @select="handleSelect"
          >
            <el-menu-item index="dataSet">
              <el-icon><setting /></el-icon>
              <span>资料设置</span>
            </el-menu-item>
            <el-menu-item index="updatePassword">
              <el-icon><setting /></el-icon>
              <span>修改密码</span>
            </el-menu-item>
            <!-- <el-menu-item index="privacyPolicy">
              <el-icon><setting /></el-icon>
              <span>隐私政策</span>
            </el-menu-item> -->
            <!-- <el-menu-item index="answerQuestions">
              <el-icon><setting /></el-icon>
              <span>答疑板</span>
            </el-menu-item> -->
            <el-menu-item index="answerHelp">
              <el-icon><setting /></el-icon>
              <span>帮助问题</span>
            </el-menu-item>
            <el-menu-item index="AdviceFeedback">
              <el-icon><setting /></el-icon>
              <span>建议反馈</span>
            </el-menu-item>
            <!-- <el-menu-item index="staffService">
              <el-icon><setting /></el-icon>
              <span>人工客服</span>
            </el-menu-item> -->
          </el-menu>
        </el-col>
        <el-col :span="18">
          <component :is="currentItem" @success="success" :currentItem="currentItem"></component>
        </el-col>
      </el-row>
    </div>
    <staticFooter></staticFooter>
  </div>
</template>

<script>
  import staticFooter from "../../components/staticFooter";
  import Header from "@/components/Header";
  import Banner from "@/components/Banner";
  // 个人中心 动态组件
  import dataSet from "@/components/personBank/dataSet";
  import updatePassword from "@/components/personBank/updatePassword";
  import privacyPolicy from "@/components/personBank/privacyPolicy";
  import answerQuestions from "@/components/personBank/answerQuestions";
  import answerHelp from "@/components/personBank/answerHelp";
  import AdviceFeedback from "@/components/personBank/AdviceFeedback";
  import staffService from "@/components/personBank/staffService";
  import {useRoute} from "vue-router";
  import {onMounted,toRefs, reactive, ref,getCurrentInstance} from "vue";
  import {bannerList, courseList} from "@/api/api";
  import {ElMessage} from "element-plus";
  import {userInfo} from "../../api/api";
  export default {
    name: "index",
    setup(){
      const { proxy } = getCurrentInstance()

      let data = reactive({
        user_info:{},
        circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      })

      let getUserInfo = () =>{
        userInfo().then(res =>{
          data.user_info = res.data
        })
      }
      getUserInfo();

      // 题库模块字典
      let currentItem_map = reactive({'dataSet':'资料设置',
        'updatePassword':'修改密码',
        'privacyPolicy':'隐私政策',
        'answerQuestions':'答疑板',
        'answerHelp':'帮助问题',
        'AdviceFeedback':'建议反馈',
        'staffService':'人工客服',
      })
      //右侧动态组件
      let currentItem = ref('dataSet');

      //左侧menu
      const handleSelect = (key,keyPath) => {
        currentItem.value = key
      }

      let success = () =>{
        getUserInfo();
      }

      return{
        proxy,
        success,
        ...toRefs(data),
        currentItem,
        handleSelect,
        currentItem_map
      }
    },
    components:{
      Header,
      Banner,
      dataSet,
      updatePassword,
      privacyPolicy,
      answerQuestions,
      answerHelp,
      AdviceFeedback,
      staffService,
      staticFooter
    }
  }
</script>

<style>
  .el-menu-item.is-active{
    background-color: rgba(42, 130, 228, 1);
  }
</style>

<style scoped>
  .link{
    cursor: pointer;
  }
  .link :hover{
    color: #409eff;
  }
  .main{
    margin: 0 auto;
    width: 75rem;
    margin-bottom: 60px;
  }
  .banner{
    width: 100%;
    height: 15rem;
    position: relative;
    overflow: hidden;
  }
  .banner > img {
    position: absolute;
    top: -100%;
  }
  .breadcrumb{
    height: 40px;
    display: flex;
    align-items: center;
  }
</style>
